<template>
	<view class="secret">
		<view class="notify-list">
			<view class="row" v-if="smlx === 'ml'">
				<view class="carrier">
					<view class="notify-wrapper">
					<view class="input-t">
						<text>领料方式</text>
					</view>
					<view class="input-body">
						<radio-group @change="handleRemindTypeChange">
							<label
								class="gender-item"
								key="1"
							>
								<radio
									class="gender-item-radio"
									color="themeColor.color"
								    value="1"
								/>
								<text class="gender-item-text">整卷</text>
							</label>
								<label
									class="gender-item"
									key="2"
								>
									<radio
										class="gender-item-radio"
										color="themeColor.color"
									    value="2"
									/>
									<text class="gender-item-text">米数</text>
								</label>
						</radio-group>
					<input type="digit" step="0.01" name="mlname" class="mlms" placeholder="请输入米数" @input='mlInput'/>
					</view>
					
					</view>
				</view>
			</view>	
			<view class="row" v-if="smlx === 'sb'">
				<view class="carrier">
					<view class="notify-wrapper">
						<view class="notify-wrapper">
							<view class="input-body">
								<radio-group @change="handleRemindTypeChange">
									<label
										class="gender-item"
										key="1"
									>
										<radio
											class="gender-item-radio"
											color="themeColor.color"
										    value="1"
											checked="true"
										/>
										<text class="gender-item-text">收包</text>
									</label>
										<label
											class="gender-item"
											key="2"
										>
											<radio
												class="gender-item-radio"
												color="themeColor.color"
											    value="2"
											/>
											<text class="gender-item-text">回修</text>
										</label>
										<label
											class="gender-item"
											key="2"
										>
											<radio
												class="gender-item-radio"
												color="themeColor.color"
											    value="3"
											/>
											<text class="gender-item-text">回修收包</text>
										</label>
								</radio-group>
							
							<input type="number"  name="huixname" class="mlms" placeholder="请输入回修数量" @input='huixInput'/>
							<!-- @tap.stop="chooseType"> -->
							<view class="input-item"  v-if="gx === 1" @tap.stop="chooseType">
								<text class="gender-item-text">{{ mtype || '请选择回修工序' }} <text class="iconfont iconxia"></text></text>
							</view>

							</view>
							
							</view>
						</view>
					</view>
			</view>	
			<view class="row" >
				<view class="carrier">
					<view class="notify-wrapper">
						<!-- <view class="title in3line">手动录入单号【点击提交】</view> -->
						<input type="text" name="name" placeholder="请输入单号" @input='nameInput'/>
						<button class="confirm-btn" @click="zyqtijiao":class="'bg-' + themeColor.name" >
							手动录入单号【点击提交】
						</button>
						<!-- <view class="un-read" :class="'bg-'+themeColor.name"></view> -->
					</view>
				</view>
			</view>	
			<view class="row2" >
			     <button class="confirm-btn" @click="getQRCode":class="'bg-' + themeColor.name" >
			     	扫码
			     </button>
			</view>
			<view class="row" v-for="(item, index) in smlist" :key="index">
				<view class="carrier">
					<view class="notify-wrapper">
						<view class="title in3line">
							<text v-if="item.dh">单号:{{ item.dh }}\n</text>
							<text v-if="item.kh">款号:{{ item.kh }}\n</text>
							<text v-if="item.ys">颜色:{{ item.ys }}\n</text>
						    <text v-if="item.cm">尺码:{{ item.cm }}\n</text>
							<text v-if="item.sl">数量:{{ item.sl }}\n</text>
							<text v-if="item.nr">状态:{{ item.nr }}\n</text>
							<text v-if="item.zsl">本卷总数量:{{ item.zsl }}</text>
							<text v-if="item.slwf">,剩余数量:{{ item.slwf }}</text>
						</view>
						<!-- <view class="time">2020-12-12</view> -->
						<view class="un-read" :class="'bg-'+themeColor.name"></view>
					</view>
				</view>
			</view>	
			<view class="row3" v-for="(item, index) in smlist2" :key="index">
				<view class="carrier" style="width:100%">
					<view class="notify-wrapper" style="width:100%">
						<view class="title in3line" style="width:100%">单号:{{ item.dh }}<br>款号:{{ item.kh }}<br>颜色:{{ item.ys }}<br>尺码:{{ item.cm }}<br>数量:{{ item.sl }}<br>状态:<text style="width:100%">{{ item.nr }}</text></view>
						<!-- <view class="time">2020-12-12</view> -->
						<view class="un-read" :class="'bg-'+themeColor.name"></view>
					</view>
				</view>
			</view>	
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				mtype:'',
				smlist: [],
				smlist2: [],
				dh:'',
				smlx:'',
				lx:'',
				lx2:'',
				mlms:'',
				huixsl:'',
				gx:0,
				gongxv: [],
			}
		},
		// onLoad() {
		// console.log('sm页面onLoad');
		//  // 获取当前小程序的页面栈
		//   let pages = getCurrentPages();
		//   // 数组中索引最大的页面--当前页面
		//   let currentPage = pages[pages.length-1];
		//   // 打印出当前页面中的 options
		//   console.log(currentPage.options);	
		//   console.log(currentPage.options.lx);
		//   this.lx=currentPage.options.lx;	
		// },
		onShow() {
			console.log('sm页面onshow');
			 // 获取当前小程序的页面栈
			  let pages = getCurrentPages();
			  // 数组中索引最大的页面--当前页面
			  let currentPage = pages[pages.length-1];
			  // 打印出当前页面中的 options
			  console.log(currentPage.options);	
              console.log(currentPage.options.lx);
			  let lx=currentPage.options.lx;
			  if(lx=='jb'){
				  this.smlx='jb';
				    wx.setNavigationBarTitle({
				      title: "发包扫码"
				    })
			  }
			  if(lx=='sb'){
				  this.smlx='sb';
				  this.lx2=1;
			  				    wx.setNavigationBarTitle({
			  				      title: "收包扫码"
			  				    })
			  }
			  if(lx=='jj'){
			  				  this.smlx='jj';
			  				    wx.setNavigationBarTitle({
			  				      title: "发件扫码"
			  				    })
			  }
			  if(lx=='sj'){
			  				  this.smlx='sj';
			  				    wx.setNavigationBarTitle({
			  				      title: "收件扫码"
			  				    })
			  }
			  if(lx=='cx'){
			  				  this.smlx='cx';
			  				    wx.setNavigationBarTitle({
			  				      title: "查询扫码"
			  				    })
			  }
			  if(lx=='ml'){
			  				  this.smlx='ml';
			  				    wx.setNavigationBarTitle({
			  				      title: "面料扫码"
			  				    })
			  }
			this.initData();
		},
		methods: {
			handleRemindTypeChange(e) {
				this.lx2 = e.detail.value;
			},
			chooseType() {
				uni.showActionSheet({
					itemList: this.gongxv,
					success: res => {
						this.mtype = this.gongxv[res.tapIndex];
			
						
					},
					fail: res => {
						console.log(res);
					}
				});
			},
			// 数据初始化
			initData() {
				// this.worksList=[];
				if(uni.getStorageSync('zyqgongxv')){
					console.log("工序刷新开始---------------------");
					let tubiao=JSON.parse(uni.getStorageSync('zyqgongxv'));
					var newArr = tubiao.map( (item, index) => {
						return item.name;
					});
					console.log(newArr);
					
					console.log(tubiao);
					this.gongxv=newArr;
					this.gx=1;
					console.log("工序刷新结束-------------------------");
				}
				// 获取当前小程序的页面栈
				 let pages = getCurrentPages();
				 // 数组中索引最大的页面--当前页面
				 let currentPage = pages[pages.length-1];
				 // 打印出当前页面中的 options
				 console.log(currentPage.options);	
				 console.log(currentPage.options.lx);
				this.lx=currentPage.options.lx;
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
			//扫码
			getQRCode(){
				var that = this;
				wx.scanCode({
				  onlyFromCamera: true,
				  success (res) {
					console.log(res);
					console.log('条码');
				    console.log(res.result);
					that.dh=res.result;
					that.zyqtijiao();
				  }
				})
				
			},	


			// 通用跳转
			// async navTo(item) {
			// 	this.$mRouter.push({
			// 		route: `/pages/notice/detail?id=${item}`
			// 	});
			// },
			zyqtijiao() {
				console.log('提交');
				if(this.smlx==='ml'){
					if(!this.lx2){
						uni.showToast({title: "领料方式不能为空",icon: 'none',mask: true,duration: 2000,});
						return;
					}
					if(this.lx2==2){
						if(!this.mlms){
							uni.showToast({title: "领料方式为米数\r\n请录入米数",icon: 'none',mask: true,duration: 2000,});
							return;}
					}
				}
				if(!this.dh){
						uni.showToast({title: "单号不能为空",icon: 'none',mask: true,duration: 2000,});
						return;
				}
				let totle=this.smlist.length;
					console.log('提交');
				console.log(totle);
				console.log(this.dh);
				if(totle>5){
					console.log('totle大于5');
				this.smlist=[];
				}
				console.log(totle);
				let totle2=this.smlist2.length;
				if(totle2>5){
					console.log('totle大于5');
				this.smlist2=[];
				}
				//判断回修
				if(this.smlx==='sb'){
					if(this.lx2==2){
						if(!this.huixsl){
							uni.showToast({title: "当前操作为回修\r\n请录入回修数量",icon: 'none',mask: true,duration: 2000,});
							return;
						}	
											if(this.gx==1){
												if(!this.mtype){
													uni.showToast({title: "请选择工序",icon: 'none',mask: true,duration: 2000,});
													return;
												}				
											}
					}
					if(this.lx2==3){
						if(!this.huixsl){
							uni.showToast({title: "当前操作为回修收包\r\n请录入回修收包数量",icon: 'none',mask: true,duration: 2000,});
							return;
						}	
											if(this.gx==1){
												if(!this.mtype){
													uni.showToast({title: "请选择工序",icon: 'none',mask: true,duration: 2000,});
													return;
												}				
											}
					}

				}
				//开始提交
				var that=this;
				console.log(that.dh);
				wx.request({
				  url:getApp().globalData.host+'api.php?',//请求地址
				  data:{//发送给后台的数据
				    m:"openwx",
					mtype:that.mtype,
				    a:that.smlx,
				    dh:that.dh,
					lx2:that.lx2,
					mlms:that.mlms,
					huixsl:that.huixsl,
					yh:uni.getStorageSync('zyqname'),
					yhid:uni.getStorageSync('zyqadminid'),
				  },
				  header:{
					//请求头
				    // "Content-Type":"applciation/json",
					"Content-Type":"text/html; charset=UTF-8",
				  },
				  method:"GET",//get为默认方法/POST
				  success:function(res){
					console.log("入库结果");
				    console.log(res.data);//res.data相当于ajax里面的data,为后台返回的数据	
					if(that.smlx=='cx'){
					that.smlist2.unshift({
						dh:  that.dh,
						kh: res.data.kh,
						ys: res.data.ys,
						cm:  res.data.cm,
						sl:  res.data.sl,
						nr: res.data.zyqztwenben,
						zsl: res.data.zsl,
						slwf: res.data.slwf,
					})	
					}else{
					that.smlist.unshift({
						dh:  that.dh,
						kh: res.data.kh,
						ys: res.data.ys,
						cm:  res.data.cm,
						sl:  res.data.sl,
						nr: res.data.zyqztwenben,
						zsl: res.data.zsl,
						slwf: res.data.slwf,
					})
					}
				  },
				  fail:function(err){
					  console.log("入库失败");
							 
							 		 
						  },//请求失败
				  complete:function(){}//请求完成后执行的函数
				})
				//结束提交
			},
			nameInput(e) {
				this.dh = e.detail.value;
				console.log("单号:"+this.dh);
			},
			huixInput(e) {
				this.huixsl = e.detail.value;
				console.log("回修数量:"+this.huixsl);
			},
			mlInput(e) {
				this.mlms = e.detail.value;
				console.log("面料米数:"+this.mlms);
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}
	.input-t {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: $spacing-base;
	margin-top: 0upx;
	font-size: $font-base;
	}
	.mlms {
	display: flex;
	margin-top: 50upx;
	}
	.input-body {
	background: $color-white;
	padding: $spacing-sm $spacing-base;
	.gender-item {
		margin-right: 20upx;

		.gender-item-text {
			padding-left: 10upx;
			}

		}
	}

	.secret {
		.add-round {
			position: fixed;
			z-index: 999;
			right: 30rpx;
			bottom: 30rpx;
			border-radius: 50%;
			width: 120rpx;
			height: 120rpx;
			color: #fff;
			text-align: center;
			line-height: 120rpx;
			font-weight: 100;
			font-size: 80rpx;
		}

		.notify-list {
			margin-top: 20upx;

			.read {
				text-align: right;
				margin-right: $spacing-base;
				margin-top: $spacing-base;
				margin-bottom: $spacing-sm;

				text {
					margin-left: $spacing-base;
				}
			}
			.row2 {
				width: calc(94%);
				height: calc(30vw);
				margin: 0 auto $spacing-base;
				border-radius: 15upx;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
				z-index: 4;
				border: 0;
			}	
			.row3 {
				width: calc(94%);
				height: calc(100vw);
				margin: 0 auto $spacing-base;
				border-radius: 15upx;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
				z-index: 4;
				border: 0;
			
				.menuz {
					.iconfont {
						color: #fff;
						font-size: 60upx;
					}
			
					position: absolute;
					width: 29%;
					height: 100%;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					z-index: 2;
				}
			
				.carrierz {
					@keyframes showMenu {
						0% {
							transform: translateX(0);
						}
			
						100% {
							transform: translateX(-30%);
						}
					}
			
					@keyframes closeMenu {
						0% {
							transform: translateX(-30%);
						}
			
						100% {
							transform: translateX(0);
						}
					}
			
					&.open {
						animation: showMenu 0.25s linear both;
					}
			
					&.close {
						animation: closeMenu 0.15s linear both;
					}
			
					background-color: #fff;
					position: absolute;
					width: 100%;
					padding: 0 0;
					height: 100%;
					z-index: 3;
					display: flex;
					align-items: center;
				}
			}

			.row {
				width: calc(94%);
				height: calc(40vw);
				margin: 0 auto $spacing-base;
				border-radius: 15upx;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
				z-index: 4;
				border: 0;

				.menu {
					.iconfont {
						color: #fff;
						font-size: 60upx;
					}

					position: absolute;
					width: 29%;
					height: 100%;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					z-index: 2;
				}

				.carrier {
					@keyframes showMenu {
						0% {
							transform: translateX(0);
						}

						100% {
							transform: translateX(-30%);
						}
					}

					@keyframes closeMenu {
						0% {
							transform: translateX(-30%);
						}

						100% {
							transform: translateX(0);
						}
					}

					&.open {
						animation: showMenu 0.25s linear both;
					}

					&.close {
						animation: closeMenu 0.15s linear both;
					}

					background-color: #fff;
					position: absolute;
					width: 100%;
					padding: 0 0;
					height: 100%;
					z-index: 3;
					display: flex;
					align-items: center;
				}
			}

			.notify-wrapper {
				background-color: $color-white;
				width: 100%;
				padding: $spacing-base $spacing-lg $spacing-base $spacing-lg;
				margin: $spacing-base 0 0;
				border-radius: 15upx;
				position: relative;

				.title {
					font-size: $font-lg;
					color: $font-color-dark;
					font-weight: 500;
					margin: 0 0 $spacing-sm;
				}

				.content {
					font-size: $font-sm;
					color: $font-color-base;
					height: 75upx;
					line-height: 36upx;
				}

				.time {
					font-size: $font-base;
					color: $font-color-light;
				}

				.type {
					position: absolute;
					top: 26upx;
					left: -10upx;
					border: none;
					font-size: $font-sm;
					opacity: 0.8;
				}

				.un-read {
					display: inline-block;
					width: 12upx;
					height: 12upx;
					border-radius: 50%;
					position: absolute;
					top: 32upx;
					right: 30upx;
				}
			}
		}

		.notify-empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			.iconfont {
				font-size: $font-lg + 100upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm + 2upx;
				color: $font-color-disabled;

				.navigator {
					margin-left: 16upx;
				}
			}
		}
	}
</style>
